<template>
  <div>
    <el-card style="width: 100%" shadow="always">
      <el-button type="primary" @click="addForm">添加装备</el-button>
    </el-card>
    <el-table :border="true" :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" min-width="60" />
      <el-table-column prop="phone" label="名称" min-width="150" />
      <el-table-column prop="username" label="型号" min-width="100" />
      <el-table-column prop="question" label="编号" min-width="200" />
      <el-table-column prop="frequency" label="状态" min-width="100" />
      <el-table-column prop="visitFrequency" label="所属部门" min-width="100" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scoped">
          <el-button link type="primary" size="small" @click="edit(scoped.row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="del(scoped.row)"
            >删除</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="detial(scoped.row)"
            >详情信息</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogEdit" title="编辑装备" width="800">
      <div class="form">
        <div class="form-item">
          <span class="title">名称</span>
          <div class="content">
            <el-input
              v-model="form.phone"
              style="width: 240px"
              placeholder="名称"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">型号</span>
          <div class="content">
            <el-input
              v-model="form.username"
              style="width: 240px"
              placeholder="型号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">编号</span>
          <div class="content">
            <el-input
              v-model="form.question"
              style="width: 240px"
              placeholder="编号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">状态</span>
          <div class="content">
            <el-input
              v-model="form.frequency"
              style="width: 240px"
              placeholder="状态"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">所属部门</span>
          <div class="content">
            <el-input
              v-model="form.visitFrequency"
              style="width: 240px"
              placeholder="所属部门"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveEdit">确定</el-button>
          <el-button type="primary" @click="dialogEdit = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogAdd" title="添加装备" width="800">
      <div class="form">
        <div class="form-item">
          <span class="title">名称</span>
          <div class="content">
            <el-input
              v-model="form.phone"
              style="width: 240px"
              placeholder="名称"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">型号</span>
          <div class="content">
            <el-input
              v-model="form.username"
              style="width: 240px"
              placeholder="型号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">编号</span>
          <div class="content">
            <el-input
              v-model="form.question"
              style="width: 240px"
              placeholder="编号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">状态</span>
          <div class="content">
            <el-input
              v-model="form.frequency"
              style="width: 240px"
              placeholder="状态"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">所属部门</span>
          <div class="content">
            <el-input
              v-model="form.visitFrequency"
              style="width: 240px"
              placeholder="所属部门"
            />
          </div>
        </div>
        <div class="form-handle">
          <el-button type="primary" @click="saveAdd">确定</el-button>
          <el-button type="primary" @click="dialogAdd = false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogDetial" title="详细信息" width="800">
      <div class="form">
        <div class="form-item">
          <span class="title">技术参数</span>
          <div class="content">
            <el-input
              disabled
              :rows="2"
              type="textarea"
              :value="detialForm.phone"
              style="width: 240px"
              placeholder="名称"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">购买日期</span>
          <div class="content">
            <el-input
              disabled
              :value="detialForm.username"
              style="width: 240px"
              placeholder="型号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">供应商信息</span>
          <div class="content">
            <el-input
              disabled
              :rows="2"
              type="textarea"
              :value="detialForm.question"
              style="width: 240px"
              placeholder="编号"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">使用说明</span>
          <div class="content">
            <el-input
              disabled
              :rows="2"
              type="textarea"
              :value="detialForm.frequency"
              style="width: 240px"
              placeholder="状态"
            />
          </div>
        </div>
        <div class="form-item">
          <span class="title">所属部门</span>
          <div class="content">
            <el-input
              disabled
              :rows="2"
              type="textarea"
              :value="detialForm.visitFrequency"
              style="width: 240px"
              placeholder="所属部门"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";

const detialForm = ref({
  phone: "xxxx",
  username: "2024-9-10",
  question: "xxxxxx",
  frequency: "使用说明",
  visitFrequency: "所属部门哦"
});
const tableData = reactive([
  {
    id: 1,
    phone: "棒子",
    username: "M-1",
    question: "2000111101",
    frequency: "闲置",
    visitFrequency: "保安部",
    sessionDuration: "500小时"
  },
  {
    id: 2,
    phone: "头盔",
    username: "N1",
    question: "2000333111",
    frequency: "维修",
    visitFrequency: "保安部",
    sessionDuration: "80小时"
  }
  // 可以添加更多数据
]);

const form = ref({
  phone: "",
  username: "",
  question: "",
  frequency: "",
  visitFrequency: ""
});
const dialogEdit = ref(false);
const dialogAdd = ref(false);
const dialogDetial = ref(false);
const rowIndex = ref(0);
function edit(row) {
  dialogEdit.value = true;
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  form.value = row;
}
function saveEdit() {
  setTimeout(() => {
    ElMessage({
      message: "编辑成功",
      type: "success"
    });
    dialogEdit.value = false;
  }, 500);
}
function del(row) {
  rowIndex.value = tableData.findIndex(i => i.id === row.id);
  setTimeout(() => {
    tableData.splice(rowIndex.value, 1);
    ElMessage({
      message: "删除成功",
      type: "success"
    });
  }, 500);
}
function addForm() {
  form.value = {
    phone: "",
    username: "",
    question: "",
    frequency: "",
    visitFrequency: ""
  };
  dialogAdd.value = true;
}

function saveAdd() {
  setTimeout(() => {
    tableData.push({
      id: tableData.length + 1,
      ...form.value
    });
    ElMessage({
      message: "添加成功",
      type: "success"
    });
    dialogAdd.value = false;
  }, 500);
}

function detial() {
  dialogDetial.value = true;
}
</script>

<style lang="scss" scoped>
/* 自定义样式，如果需要 */
.el-table {
  margin-top: 12px;
}
.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 定义两列，每列占用一半宽度 */
  gap: 10px; /* 项目之间的间距 */
  .form-handle {
    margin-top: 12px;
    grid-column: span 2;
    display: flex;
    justify-content: end;
  }
}
</style>
